<template>
	<view class="container">
		<!-- 头部统计 -->
		<view class="header-stats">
			<view class="stat-card income">
				<text class="stat-label">本月收入</text>
				<text class="stat-amount">¥{{ monthlyIncome.toFixed(2) }}</text>
			</view>
			<view class="stat-card expense">
				<text class="stat-label">本月支出</text>
				<text class="stat-amount">¥{{ monthlyExpense.toFixed(2) }}</text>
			</view>
		</view>

		<!-- 快速操作区域（与图片一致） -->
		<view class="quick-actions">
			<view class="action-item" @click="addRecord(1)">
				<view class="action-icon income">+</view>
				<text class="action-text">收入</text>
			</view>
			<view class="action-item" @click="addRecord(0)">
				<view class="action-icon expense">-</view>
				<text class="action-text">支出</text>
			</view>
		</view>

		<!-- 今日记录 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">今日记录</text>
				<text class="section-more" @click="viewAllRecords">查看全部</text>
			</view>

			<view v-if="todayRecords.length > 0" class="records-list">
				<record-item v-for="record in todayRecords" :key="record.id" :record="record"
					@click="editRecord(record)" />
			</view>

			<view v-else class="empty-state">
				<text class="empty-text">今天还没有记录</text>
				<button class="empty-btn" @click="addRecord(0)">记一笔</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex';
	import RecordItem from '@/components/record-item/record-item.vue';

	export default {
		components: {
			RecordItem
		},

		data() {
			return {
				loading: false
			};
		},

		computed: {
			...mapGetters(['todayRecords', 'monthlyIncome', 'monthlyExpense'])
		},

		onLoad() {
			this.loadData();
		},
		
		onShow() {
			this.loadData();
		},

		onPullDownRefresh() {
			this.loadData().finally(() => {
				uni.stopPullDownRefresh();
			});
		},

		methods: {
			...mapActions(['loadRecords', 'loadCategories']),
			
			async loadData() {
				try {
					await this.loadRecords();
				} catch (error) {
					console.error('加载数据失败:', error);
					uni.showToast({
						title: '加载数据失败',
						icon: 'none'
					});
				}
			},

			addRecord(type) {
				uni.navigateTo({
					url: `/pages/add-record/add-record?type=${type}`
				});
			},

			editRecord(record) {
				uni.navigateTo({
					url: `/pages/add-record/add-record?id=${record.id}`
				});
			},

			viewAllRecords() {
				uni.showToast({
					title: '开发中...',
					icon: 'none'
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background: #f5f5f5;
		min-height: 100vh;
	}

	.header-stats {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.stat-card {
		flex: 1;
		padding: 30rpx;
		border-radius: 20rpx;
		margin: 0 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.stat-card.income {
		background: linear-gradient(135deg, #34C759, #30B14C);
		color: white;
	}

	.stat-card.expense {
		background: linear-gradient(135deg, #FF3B30, #D70015);
		color: white;
	}

	.stat-label {
		display: block;
		font-size: 28rpx;
		opacity: 0.9;
		margin-bottom: 10rpx;
	}

	.stat-amount {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
	}

	/* 快速操作区域（与图片一致） */
	.quick-actions {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 20rpx;
	}

	.action-icon.income {
		background-color: #34C759;
	}

	.action-icon.expense {
		background-color: #FF3B30;
	}

	.action-text {
		font-size: 28rpx;
		color: #666;
	}

	.section {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.section-more {
		font-size: 28rpx;
		color: #007AFF;
	}

	.empty-state {
		text-align: center;
		padding: 60rpx 0;
	}

	.empty-text {
		display: block;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.empty-btn {
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 10rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
	}
</style>